<template>
  <v-chart :ref="refs"
           :theme="tdTheme"
           :autoresize="true"
           :options="polar" />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
import 'echarts/map/js/province/tianjin'
export default {
  name: 'Emap',
  components: {
    'v-chart': ECharts
  },
  props: {
    visualMap: {
      type: Object,
      default () {
        return {}
      }
    },
    mapData: {
      type: Array,
      default () {
        return []
      }
    },
    refs: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    subText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tdTheme: tdTheme,
      polar: {}
    }
  },
  methods: {
    init () {
      const { visualMap, mapData } = this
      const option = {
        title: {
          text: this.text,
          subtext: this.subText,
          x: 'center'
        },
        legend: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        grid: {
          top: 10,
          bottom: '10%',
          left: '10%',
          right: '10%'
        },
        tooltip: {},
        visualMap,
        // radar: {
        //   indicator: indicator
        // },
        series: [
          {
            type: 'map',
            map: '天津',
            label: {
              show: true
            },
            data: mapData
          }
        ]
      }
      this.polar = option
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>
